<template>
  <div class="signUp">
    <agreement></agreement>
    <header>
      <span class="title">{{ title }}</span>
      <div class="tan"></div>
    </header>
    <div class="content">
      <div class="steps">
        <step-line
          v-for="(item, index) in stepList"
          :key="index"
          :name="item"
          :step="index + 1"
          :width="'short'"
          :finished="index <= currentIndex"
        ></step-line>
      </div>
      <form-1 v-if="currentIndex === 0"></form-1>
      <form-2 v-if="currentIndex === 1"></form-2>
      <form-3 v-if="currentIndex === 2"></form-3>
      <form-4 v-if="currentIndex === 3"></form-4>
      <div class="btnBox">
        <div class="nextbtn" @click="nextStep">{{btnName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import agreement from './componets/agreementDialog'
import form1 from './componets/form1'
import form2 from '../findPassword/componets/form1'
import form3 from './componets/form2'
import form4 from '../findPassword/componets/form3'

export default {
  data () {
    return {
      title: '注册',
      currentIndex: 0, // 当前步骤
      btnName: '下一步',
      stepList: [
        '邀请码',
        '手机号验证',
        '设置密码',
        '完成'
      ]
    }
  },
  watch: {
    currentIndex: {
      handler (val) {
        this.stepList.forEach((item, index) => {
          switch (val) {
            case 2:
              this.btnName = '确认'
              break
            case 3:
              this.btnName = '完成'
              break
            default:
              this.btnName = '下一步'
              break
          }
        })
      }
    }
  },
  methods: {
    async nextStep () {
      switch (this.currentIndex) {
        case 0: {
          await this.$store.dispatch('register/checkInvitationCode').then(res => {
            if (!res) {
              return false
            }
            if (res.data.code !== 200) {
              return false
            } else {
              this.currentIndex++
            }
          })
          break
        }
        case 1: {
          await this.$store.dispatch('register/register').then(res => {
            if (res.data.code === 200) {
              this.currentIndex++
              this.$store.commit('common/clear_timer')
              this.$store.commit('common/set_countDownText', '获取验证码')
            }
          })
          break
        }
        case 2: {
          await this.$store.dispatch('register/userInfoUpdate').then(res => {
            if (res) {
              if (res.data.code === 200) {
                this.currentIndex++
              }
            }
          })
          break
        }
        case 3: {
          this.$router.push('/Login')
          this.tools.storage.removeSignUpTemp()
          break
        }
      }
    }
  },
  components: {
    form1,
    form2,
    form3,
    form4,
    agreement
  },
  created () {
    this.$store.commit('register/set_state')
  }
}
</script>

<style lang="scss" scoped>
.signUp{
  height: 640px;
  background: #ffffff;
  box-shadow: 0px 6px 36px 0px #ebedf3;
  user-select: none;
}
header {
  position: relative;
  height: 60px;
  background: #304eec;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  line-height: 60px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 62px;
  .tan {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-top: 6px solid #304eec;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
}
.content {
  width: 540px;
  height: 350px;
  // background-color: pink;
  margin: 0 auto;
  .steps {
    height: 109px;
  }
  .btnBox{
      margin: 0 auto;
      width: 400px;
    .nextbtn{
      height: 48px;
      text-align: center;
      line-height: 48px;
      background: linear-gradient(316deg,#4a53ef, #6971fe 100%);
      border-radius: 2px;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>
